import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {

  flag: boolean = true

  // 使用ViewChild获取dom节点, 第二个参数必须要加， 里面的static是必填属性
  @ViewChild('mybox', {static: false}) mybox:any;

  // 使用ViewChild获取 子组件 实例
  @ViewChild('header', {static: true}) header:any

  constructor() { }

  ngOnInit() {

    //  angular的生命周期钩子
    // 组件和指令的初始化完成， 并不是真正的dom加载完成
    let box: HTMLElement = document.getElementById('box')
    box.style.color = 'yellow'

    // 如果是有 *ngIf 指令的标签是没法获取的
    // let box1: HTMLElement = document.getElementById('box1')
    // box1.style.color = 'red'
  }

  //视图加载完成后触发的方法 dom加载完成 （dom操作最好都在这里）
  ngAfterViewInit(): void {
     let box1: HTMLElement = document.getElementById('box1')
     box1.style.color = 'red'

    //  viewchild的dom操作建议也在这个周期里
    // console.log(this.mybox);
    console.log(this.mybox.nativeElement);    // nativeElement类似于获取原生 dom
    let myboxdom = this.mybox.nativeElement
    myboxdom.style.color="blue"


    // 调用子组件的方法
    this.header.run()

    // 所以获取子组件使用 @ViewChild
  }

}
